<template>
    <div class="nav_right">
        <div class="start">
            <div class="nav one">
                <a href="javascript:void(0)">
                    <img src="../assets/kefu/side-kefu.png" alt="" class="one_img">
                    <span>联系客服</span>
                </a>
            </div>
            <div class="nav two">
                <a href="javascript:void(0)">
                    <img src="../assets/kefu/side-tel.png" alt="">
                    <span>177 5492 8306</span>
                </a>
            </div>
            <div class="nav ">
                <a href="javascript:void(0)">
                    <img src="../assets/kefu/side-weixin.png" alt="">
                </a>
            </div>
            <div class="nav">
                <a href="javascript:void(0)">
                    <img src="../assets/kefu/side-code.png" alt="">
                </a>
            </div>
            <div class="nav last" :class="{top:isTop}" @click="scrollUp()">
                <a href="javascript:void(0)">
                    <img src="../assets/kefu/side-top.png" alt="">
                </a>
            </div>
        </div>
    </div>
</template>

<script>
    import $ from "jquery"
    export default {
        name: "nac_right",
        data(){
            return{
                isTop:true,
            }
        },
        mounted() {
            window.addEventListener('scroll',this.scollIf)
        },
        methods:{
            scollIf(){
                let scrollTop = window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop;
                if(scrollTop>5){
                    this.isTop=false;
                }else {
                    this.isTop=true
                }
            },
            scrollUp(){
                // document.body.scrollTop  = document.documentElement.scrollTop = 0;
                $('html,body').animate({scrollTop: 0},400);
            }
        }
    }
</script>

<style lang="less" scoped>
    .nav_right{
        width: 100%;
        height: 100%;
        .start{
            position: fixed;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            /*border: 1px solid red;*/
            z-index: 10;
            width: 50px;

            .nav{
                background: #333333;
                width: 40px;
                height: 40px;
                margin-top: 3px;
                position: relative;
                right: 0;
                float: right;
                clear: right;
                display: flex;
                align-items: center;
                /*justify-content: center;*/
                a{
                    color: white;
                    &:hover{
                        background-position: 50px;
                    }
                    span{
                        line-height: 40px;
                        margin-left: 7px;
                        float: left;
                    }
                    img{
                        /*margin-top: 5px;*/
                        margin-left: 5px;
                    }

                }
            }
            .nav.one{
                width: 120px;
                box-sizing: border-box;
                margin-right: -80px;
                transition: 500ms ease-in-out;
                &:hover{
                    margin-right: 0;
                    background: #0595C7;
                }
                img{
                    margin-top: 7px;
                    float: left;
                }
            }
            .nav.two{
                width: 170px;
                box-sizing: border-box;
                margin-right: -130px;
                transition: 500ms ease-in-out;
                &:hover{
                    margin-right: 0;
                    background: #0595C7;

                }
                img{
                    margin-top: 7px;
                    float: left;
                }
            }
            .last{
                &:hover{
                    background: #0595C7;
                }
            }
            .nav.top{
                display: none;
            }
        }
    }
</style>
